<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { exceptApi } from '@/apis/task.js';

onLoad((options) => {
	formData.value.transportTaskId = options.transportTaskId;
});

// 组件 ref
const popup = ref(null);
// 文件提示
const exceptTime = computed(() => {
	return formData.value.exceptionTime || '请选择';
});

// 打开地图
async function onLocationChoose() {
	try {
		const { address } = await uni.chooseLocation({});
		console.log(address);
		formData.value.exceptionPlace = address;
	} catch (err) {}
}

const selects = ref([]);

//点击处理异常项
const selectTypes = (e) => {
	// console.log(e);
	exceptionTypes.value[e].checked = !exceptionTypes.value[e].checked;
};
// 点击类型弹层确认按钮
function onPopupConfirm(e) {
	/**
	 * 1.选中的异常类型
	 * 2.处理成以|分割的字符串（后台要求的参数格式）
	 * 3.回显视图
	 * 4.关闭弹窗
	 */
	const selected = exceptionTypes.value.filter((item) => item.checked);
	// console.log(selected);

	if (selected.length > 0) {
		// console.log(selected.map(item=>item.text).join('|'));
		formData.value.exceptionType = selected.map((item) => item.text).join('|');
		console.log(formData.value.exceptionType);
	} else {
		uni.showToast({
			title: '请至少选择一个异常项目'
		});
	}

	popup.value.close();
}

//弹窗数据
// 定义 popup 组件展示的数据
const exceptionTypes = ref([
	{ text: '发动机启动困难', checked: false },
	{ text: '不着车，漏油', checked: false },
	{ text: '照明失灵', checked: false },
	{ text: '排烟异常、温度异常', checked: false },
	{ text: '其他问题', checked: false }
]);

// 打开弹层
function onPopupOpen() {
	popup.value.open();
}

//需要的参数
// 1. 异常上报表单数据
const formData = ref({
	transportTaskId: '', // 任务 id
	exceptionTime: '', // 异常时间
	exceptionPlace: '北京市区', // 异常位置
	exceptionType: '', //  异常类型
	exceptionDescribe: '', // 异常描述
	exceptionImagesList: [] //  异常图片描述
});

//文字
const count = computed(() => {
	return formData.value.exceptionDescribe.length;
});

const delayReasonValid = computed(() => {
	return formData.value.exceptionDescribe.length >= 0 && formData.value.exceptionDescribe.length <= 50;
});

//5.存储上传的图片

//6.兜底校验
const isSubmitOk = computed(() => {
	// 数组中应该是判断长度，不应该直接判断本身
	return !formData.value.exceptionTime || !formData.value.exceptionPlace || !formData.value.exceptionType || !formData.value.exceptionImagesList.length;
});

//7.点击上传
const submitForm = async () => {
	/**
	 * 1.处理异常图片
	 * 2.调用接口
	 * 3.提示并跳跃任务列表
	 */
	formData.value.exceptionImagesList = formData.value.exceptionImagesList.map(({ url }) => ({ url }));
	// console.log(formData.value);
	await exceptApi(formData.value);
	uni.utils.message('上报成功！');
	// 跳转到任务列表页面
	uni.reLaunch({ url: '/pages/task/index' });
};
</script>

<template>
	<view class="page-container">
		<scroll-view class="scroll-view" scroll-y>
			<view style="margin: 30rpx" class="scroll-view-wrapper">
				<uni-list :border="false">
					<uni-list-item show-arrow title="异常时间">
						<template v-slot:footer>
							<!-- 双向绑定可以自动获取用户选择的日期时间。 -->
							<uni-datetime-picker v-model="formData.exceptionTime">
								<!-- 回显选择的时间 -->
								<view class="picker-value">{{ exceptTime }}</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>

					<uni-list-item show-arrow clickable ellipsis="1" @click="onLocationChoose" title="上报位置" :rightText="formData.exceptionPlace || '请选择'" />
					<uni-list-item show-arrow clickable @click="onPopupOpen" title="异常类型" :rightText="formData.exceptionType || '请选择'" />
					<uni-list-item direction="column" title="异常描述">
						<template v-slot:footer>
							<view class="textarea-wrapper">
								<textarea class="textarea" placeholder="请输入异常描述" v-model="formData.exceptionDescribe"></textarea>
								<!-- 使用computed做的校验 -->
								<view class="words-count" :class="{ error: !delayReasonValid }">{{ count }}/50</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="false" style="margin-top: -30rpx" direction="column" title="上传图片（最多6张）">
						<template v-slot:footer>
							<uni-file-picker limit="6" v-model="formData.exceptionImagesList" file-extname="jpg,webp,gif,png"></uni-file-picker>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</scroll-view>
		<!-- 点击提交按钮 -->
		<view class="fixbar">
			<button class="button disable" @click="submitForm" :disabled="isSubmitOk">提交</button>
		</view>

		<!-- 异常类型弹层 -->
		<!-- mask-click遮罩可以点击关闭 ，type="bottom"弹窗出现的类型，从上从下从左从右 -->
		<uni-popup ref="popup" :mask-click="false" type="bottom">
			<uni-list class="popup-action-sheet">
				<uni-list-item>
					<template v-slot:header>
						<view class="header">选择类型</view>
					</template>
				</uni-list-item>
				<uni-list-item v-for="(exceptionType, index) in exceptionTypes" :key="exceptionType.text" :title="exceptionType.text">
					<template #footer>
						<checkbox-group class="checkbox" @change="selectTypes(index)">
							<checkbox :checked="exceptionType.checked" color="#EF4F3F" />
						</checkbox-group>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<button @click="onPopupConfirm" class="button">确定</button>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
